import styled from 'styled-components'
import border from '../styled/border'

const TabBarWrapper = styled.div `
    width: 100%;
    position: ${props => props.fixed ? 'fixed' : 'static'};
    bottom: 0;
`

const TabBarListWrapper = border(
    styled.ul `
        width: 100%;
        height: .6rem;
        display: flex;
        background-color: #fff;
    `
)

const TabBarItemWrapper = styled.li `
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex: 1;
    text-align: center;
    i{
        padding: 0;
    }
    span {
        font-size: .12rem;
        transform: scale(0.9);
        color: ${ props => props.color }
    }
`

export {
    TabBarWrapper,
    TabBarListWrapper,
    TabBarItemWrapper
}